<!DOCTYPE html>
<html lang="en">

<head>
  <script src="./lib/wyrem.js"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
  <title></title>
  <script src="./lib/tool.js"></script>
  <script src="./lib/less.min.js"></script>
  <script src="./lib/jquery-1.8.2.min.js"></script>
  <script src="http://cdn.gbtags.com/EaselJS/0.7.1/easeljs.min.js"></script>
  <script src="./lib/vconsole.min.js"></script>
  <style media="screen">
    .myc {
      width: 2rem;
      height: 2rem;
      background-position: 0 0;
      background-repeat: no-repeat;
    }
    .none{
      display: none;
    }
  </style>
</head>

<body onload="preventMove()">
  <div class="mypanel">
    <div id="myc" class="myc " ></div>
    <canvas id="myCanvas" class="myc"></canvas>
  </div>
  <script>
    var canvas = document.getElementById('myCanvas'),
      ctx = canvas.getContext('2d');
    canvas.width = $('#myc').width();
    canvas.height = $('#myc').height();
    var w = canvas.width;
    var h = canvas.height;
    console.log(w, h);
    area = w * h;
    l = canvas.offsetLeft;
    t = canvas.offsetTop,
      img = new Image();

    var randomImg = function() {
      var random = Math.random();
      if (random < 0.4) {
        img.src = './images/1.png';
      } else if (random > 0.6) {
        img.src = './images/2.png';
      } else {
        img.src = './images/3.png';
      }
    };
    var bindEvent = function() {
      canvas.addEventListener('touchmove', moveFunc, false);
      canvas.addEventListener('touchend', endFunc, false);
    };
    var moveFunc = function(e) {
      var touch = e.touches[0],
        posX = touch.clientX - l,
        posY = touch.clientY - t;
      ctx.beginPath();
      ctx.arc(posX, posY, 15, 0, Math.PI * 2, 0);
      ctx.fill();
    };
    var endFunc = function(e) {
      var data = ctx.getImageData(0, 0, w, h).data,
        scrapeNum = 0;
      console.log(data, area);
      for (var i = 3, len = data.length; i < len; i += 4) {
        if (data[i] === 0) {
          scrapeNum++;
        }
      }
      if (scrapeNum > area * 0.7) {
        ctx.clearRect(0, 0, w, h);
        canvas.removeEventListener('touchmove', moveFunc, false);
        canvas.removeEventListener('touchend', endFunc, false);
        console.log('恭喜您，你获得了大奖');
      }
    }
    var init = (function() {
      ctx.fillStyle = "#ccc";
      ctx.fillRect(0, 0, w, h);
      randomImg();
      img.addEventListener('load', function() {
        canvas.style.backgroundImage = 'url(' + img.src + ')';
        ctx.globalCompositeOperation = 'destination-out';
        bindEvent();
      });
    })();
  </script>
</body>

</html>
